<script setup lang='ts'>
import { ref, computed, onMounted, watch } from 'vue';
import { Dialog } from 'vant';
import { areaList } from '@vant/area-data';
import { useRouter } from 'vue-router';
import { useAddressStore } from '@/stores/address';
import { useCounterStore } from '@/stores/users'
// 调用
const userAddress = useAddressStore()
const userStore = useCounterStore()

const chosenAddressId = ref('1');

// 添加地址
const show = ref(false);
const editshow = ref(false);

// 数据
const addressInfo = ref({})
const onAdd = () => {
	show.value = true
};
const onEdit = (item: any, index: any) => {
	editshow.value = true;
	// 修改
	addressInfo.value = item;
};

// 添加函数
const onSave = async (options: object) => {
	//添加操作 => 收集数据,将该数据添加给服务器  
	// 收集数据
	let obj = {
		// 浅拷贝
		userid: userStore.userid,
		...options
	}
	//发送请求
	try {
		//添加成功
		await userAddress.addAddressListHandler(obj)
		//隐藏弹出框
		show.value = false;
		//添加完成之后,我们需要再次获取一遍数据
		await userAddress.getAddressListHandler({
			userid: userStore.userid
		})
	} catch {

	}
}

// 修改
const edit = async (options: object) => {
	//添加操作 => 收集数据,将该数据添加给服务器  
	// 收集数据
	//发送请求
	await userAddress.editAddressListHandler(options)
	//隐藏弹出框
	editshow.value = false;
	//修改完成之后,我们需要再次获取一遍数据
	await userAddress.getAddressListHandler({
		userid: userStore.userid
	})
}
// 获取地址
//TODO 使用计算属性获取地址信息
const AddressList = computed(() => {
	return userAddress.addressList.map(item => {
		return {
			...(item as any),
			id: (item as any).addressid,
			areaCode: Object.keys(areaList.county_list)[(Object as any).values(areaList.county_list).findIndex((item1: any) => item1 == (item as any).county)],
			address: (item as any).province + "_" + (item as any).city + "_" + (item as any).county + "_" + (item as any).addressDetail
		}
	})
})
//TODO mounted里面发送器请求,获取数据
onMounted(() => {
	userAddress.getAddressListHandler({
		userid: userStore.userid
	})
})
//TODO 选中的状态改变
watch(chosenAddressId, (value) => {
	// console.log(AddressList.value,value);
	AddressList.value.forEach(item => {
		item.isDefault = false;
	})
	//将点击的那个修改成true
	AddressList.value.find(item => item.addressid == value).isDefault = true
	//在修改的地方也要存储一份地址
	localStorage.setItem("addressList", JSON.stringify(AddressList.value))
})

// 删除
const delAddress = () => {
	try {
		Dialog.confirm({
			title: '确认删除吗？',

		})
			.then(() => {
				userAddress.delAddressListHandler({ addressid: chosenAddressId.value })
				//重新获取数据
				userAddress.getAddressListHandler({ userid: userStore.userid })

			})
			.catch(() => {
				// on cancel
			});
	} catch {

	}
}

</script>
<template>
	<div class="address">
		<van-nav-bar title="晨锋电商" left-text="返回" left-arrow right-text="删除" @click-left="$router.back()"
			@click-right="delAddress" />
		<van-address-list v-model="chosenAddressId" :list="AddressList" default-tag-text="默认" @add="onAdd"
			@edit="onEdit" />
		<!--添加弹出层 -->
		<van-popup v-model:show="show" round position="bottom" :style="{ height: '60%' }">
			<!-- 弹出地址栏 -->
			<van-address-edit :area-list="areaList" show-set-default :area-columns-placeholder="['请选择', '请选择', '请选择']"
				@save="onSave" />
			<!-- 弹出地址栏 -->

		</van-popup>
		<!-- 修改 -->
		<van-popup v-model:show="editshow" round position="bottom" :style="{ height: '60%' }">
			<!-- 弹出地址栏 -->
			<van-address-edit :address-info="addressInfo" :area-list="areaList" show-set-default
				:area-columns-placeholder="['请选择', '请选择', '请选择']" @save="edit" />
			<!-- 弹出地址栏 -->

		</van-popup>

		<!--  -->



	</div>
</template>
<style scoped lang='scss'>

</style>